<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import {
    addFlashPromotion,
    updateFlashPromotion,
} from '@/api/flashPromotion';
import { uploadFile } from '@/api/file';
import { VITE_APP_IMAGE_BASE_URL as baseImage } from '@/utils/base';
import { clearFormData } from '@/utils/utils';
const props = defineProps({
    dialog: {
        required: true,
        type: Object,
        default: {}
    },
    formData: {
        required: true,
        type: Object,
        default: {}
    },
})

const { dialog, formData } = props
const emit = defineEmits(['resetQuery'])

const dataFormRef = ref(ElForm);
const total = ref(0)
const dataList = ref<any>([])
const ids = ref<number[]>([]);

const queryParams: any = reactive({
    current: 1,
    pageSize: 10,
    startDate: '',
    endDate: '',
    status: null
});

const timeList = [
    {
        label: '8:00',
        value: '8:00',
        id: 1,
    },
]

/**
 * 关闭弹窗
 */
function closeDialog() {
    dialog.visible = false;
    resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
    if (dataFormRef.value) {
        dataFormRef.value.resetFields();
        dataFormRef.value.clearValidate();
    }
    clearFormData(formData);
    formData.status = 1
}

/**
 * 查询
 */
function handleQuery() {
    //   getFlashPromotionList({
    //     ...queryParams,
    //     status: Number(queryParams.status)
    //   })
    //     .then((res: any) => {

    //       dataList.value = res.data.data;
    //       total.value = res.data.total;
    //     })
}

/**
 * 重置查询
 */
function resetQuery() {
    //   queryParams.endDate = '';
    //   queryParams.startDate = '';
    //   queryParams.current = 1;
    //   queryFormRef.value.resetFields();
    handleQuery();
}

/**
 * 行checkbox change事件
 */
function handleSelectionChange(selection: any) {
    ids.value = selection.map((item: any) => item.id);
}

/**
 * 删除
 */
function handleDelete(id?: number) {
    let idList = ids.value
    id ? idList = [...ids.value, id] : null
    if (idList.length === 0) {
        ElMessage.warning('请勾选删除项');
        return;
    }

    ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // deleteFlashPromotion({ ids: idList }).then(() => {
        //     ElMessage.success('删除成功');
        //     handleQuery();
        // });
    });
}

/**
 * 类型表单弹窗
 *
 */
function openDialog(row?: object) {
    dialog.visible = true;
    if (row) {
        dialog.title = '预览';
        Object.assign(formData, row);
        formData.startEndTime = [formData.startDate, formData.endDate]
    } else {
        //resetForm();
        dialog.title = '预览';
    }
}

/**
 * 表单提交
 */
function handleSubmit() {
    dataFormRef.value.validate((valid: any) => {
        if (valid) {
            if (formData.id) {
                updateFlashPromotion(formData)
                    .then(() => {
                        closeDialog()
                        emit('resetQuery');
                        ElMessage.success('操作成功');

                    })
            } else {
                addFlashPromotion(formData)
                    .then(() => {
                        closeDialog()
                        emit('resetQuery');
                        ElMessage.success('操作成功');

                    })
            }

        }
    });
}

onMounted(() => {

});
</script>

<template>
    <div>
        <el-dialog :title="dialog.title" v-model="dialog.visible" width="1600px" @close="closeDialog">

            <el-form ref="dataFormRef" :model="formData" label-width="100px" :inline="true">
                <el-form-item label="商品名称" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="时间表" prop="flashPromotionSessionId">
                    <el-select class="el-select" v-model="formData.flashPromotionSessionId" placeholder="请选择">
                        <el-option v-for="item in timeList" :key="item.id" :label="item.label" :value="item.id" />
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleQuery">
                        <i-ep-search />搜索
                    </el-button>
                    <el-button @click="resetQuery">
                        <i-ep-refresh />
                        重置
                    </el-button>
                </el-form-item>

            </el-form>

            <el-card shadow="never">
                <template #header>
                    <div class="flex justify-between">
                        <div>
                            <el-button type="success" @click="openDialog()">
                                <i-ep-plus />新增
                            </el-button>
                            <el-button type="danger" :disabled="ids.length === 0" @click="handleDelete()">
                                <i-ep-delete />删除
                            </el-button>
                        </div>
                    </div>
                </template>

                <el-table :data="dataList" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column label="序号" type="index" align="center" width="55" />
                    <el-table-column label="商品名称" align="center" prop="title" width="200" />
                    <el-table-column label="货号" align="center" prop="title" width="200" />
                    <el-table-column label="商品价格" align="center" prop="title" width="120" />
                    <el-table-column label="剩余数量" align="center" prop="title" width="150" />
                    <el-table-column label="秒杀价格" align="center" prop="title" width="150" />
                    <el-table-column label="秒杀数量" align="center" prop="title" width="150" />
                    <el-table-column label="限购数量" align="center" prop="title" width="150" />
                    <el-table-column label="排序" align="center" prop="startDate" />
                    <el-table-column label="操作" fixed="right" align="center" width="200">
                        <template #default="scope">
                            <el-button type="primary" link size="small" @click.stop="handleDelete(scope.row.id)">
                                <i-ep-delete />删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.current"
                    v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
            </el-card>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleSubmit">确 定</el-button>
                    <el-button @click="closeDialog">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped>
.el-form-item .el-select {
    width: 100%;
}

.upload-demo .upload-demo-img {
    width: 100px;
    height: 100px;
    display: block;
}

:deep(.el-upload-list) {
    display: none !important;
}
</style>

<style>
.upload-demo .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.upload-demo .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.upload-demo-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
}
</style>